<template>
  <view class="personal-wrap">
    <view class="header relative">
      <view class="top-block relative"></view>
      <view class="personal-title white text-center"> 个人中心 </view>
      <view class="personal-info w100">
        <view class="top flex-x-between">
          <view class="left flex">
									<open-data class="avatar" type="userAvatarUrl"></open-data>
									<!-- <open-data class="authorize-user__name" type="userNickName"></open-data> -->
      <!--      <image
              :src="personal.portrait"
              class="avatar"
              @click="quitModelShow = true"
            ></image> -->
            <view class="inline-block">
              <!-- <text class="name block">{{ personal.name }}</text> -->
							<view>
							<open-data class="name block" type="userNickName"></open-data>
								<!-- <open-data lang="zh_CN" type="userGender"></open-data> -->
								
							</view>
								<open-data lang="zh_CN" class="location" type="userCity"></open-data>
<!--              <text class="location">
               <text
                  :class="[
                    `iconfontPT ${isMan ? 'iconnansheng_1' : 'iconnvsheng'}`,
                  ]"
                ></text>
                {{ personal.city }}</text
              > -->
            </view>
          </view>
<!--          <navigator
            class="right text-center"
            hover-class="none"
            url="/pages/personal/personal-info/index"
          >
            个人信息<text class="iconfontPT iconxiayibu icon-detail"></text>
          </navigator> -->
        </view>
        <view class="bottom personal-autograph">
          <text class="iconfontPT icongerenmiaoshu"></text>
          个人描述：{{ personal.autograph ? personal.autograph : "暂无" }}
        </view>
      </view>
    </view>

    <view class="personal-main">
      <view
        class="personal-classify personal-menu-wrap bg-white flex-x-between"
      >
        <view
          class="item text-center"
          v-for="(item, index) in personalMenu"
          :key="index"
          v-if="item.status"
        >
          <navigator
            :class="{
              'flex-y-center': true,
              'my-message relative': item.name === '我的消息',
            }"
            hover-class="none"
            :url="item.path"
          >
            <text
              class="message-count"
              v-if="item.name === '我的消息' && messageCount"
              >{{ messageCount > 100 ? "+99" : messageCount }}</text
            >
            <image :src="item.url" class="icon block"></image>
            <text class="name">{{ item.name }}</text>
          </navigator>
        </view>
      </view>
      <view class="personal-classify personal-order-wrap bg-white">
        <view class="head flex-x-between">
          <view class="title bold"> 我的订单 </view>
          <navigator
            class="read-all"
            hover-class="none"
            url="/pages/personal/order/index?state=0"
          >
            查看全部订单<text class="iconfontPT iconxiayibu icon-detail"></text>
          </navigator>
        </view>
        <view class="personal-order flex-x-between">
          <view
            class="item text-center"
            v-for="(item, index) in personalOrder"
            :key="index"
          >
            <navigator
              class="flex-y-center"
              hover-class="none"
              :url="item.path"
            >
              <image :src="item.url" class="icon block"></image>
              <text class="name">{{ item.name }}</text>
            </navigator>
          </view>
        </view>
      </view>
      <view class="personal-classify personal-service-wrap bg-white">
        <view class="head flex-x-between">
          <view class="title bold"> 我的服务 </view>
          <view></view>
        </view>
        <view class="personal-service flex-x-start">
          <view
            class="item text-center"
            :style="{
              width:
                item.showIdentity == identity || item.showIdentity === 'all'
                  ? '25%'
                  : '0',
            }"
            v-for="(item, index) in personalService"
            :key="index"
            v-if="item.status"
          >
            <view
              class="flex-y-center"
              @click="phoneListPopupShow = true"
              v-if="item.name === '联系客服'"
            >
              <image :src="item.url" class="icon block"></image>
              <text class="name">{{ item.name }}</text>
            </view>
            <view
              class="flex-y-center"
              @click="handleJudge"
              v-else-if="item.name === '我的权益'"
            >
              <image :src="item.url" class="icon block"></image>
              <text class="name">{{ item.name }}</text>
            </view>
            <navigator
              class="flex-y-center"
              hover-class="none"
              :url="item.path"
              v-else-if="
                item.showIdentity == identity || item.showIdentity === 'all'
              "
            >
              <image :src="item.url" class="icon block"></image>
              <text class="name">{{ item.name }}</text>
            </navigator>
          </view>
          <view class="item text-center" v-if="states.includes('10')">
            <view class="flex-y-center" @tap="promoteShow = true">
              <image src="/static/images/zixun.png" class="icon block"></image>
              <text class="name">我的推广</text>
            </view>
          </view>
          <view class="item text-center" v-if="states.includes('20')">
            <navigator class="flex-y-center" url="/pages/used-car/SellingCars">
              <image src="/static/images/maiche.png" class="icon block"></image>
              <text class="name">上传车辆</text>
            </navigator>
          </view>
          <view class="item text-center" v-if="states.includes('90')">
            <navigator
              class="flex-y-center"
              :url="`/pages/shop/carList?distributor_id=${distributor_id}&factory_id=${factory_id}`"
            >
              <image src="/static/images/dianpu.png" class="icon block"></image>
              <text class="name">我的店铺</text>
            </navigator>
          </view>
        </view>
      </view>
    </view>
    <homeTabBar :showstatus="showSataus" />
    <promote v-model="promoteShow"></promote>
    <u-modal
      v-model="quitModelShow"
      title="重新授权"
      content="确认重新授权吗？"
      :show-cancel-button="true"
      @confirm="handleQuitConfirm"
    ></u-modal>
    <u-popup v-model="phoneListPopupShow" mode="bottom">
      <view class="phone-popup-body">
        <view class="phone-list">
          <view
            class="phone-list__item"
            v-for="item in phoneList"
            :key="item.phone"
            @click="handlePhoneCall(item.phone)"
          >
            <view class="phone-list__name">{{ item.name }}</view>
            <view class="phone-list__phone">{{ item.phone }}</view>
          </view>
        </view>
      </view>
      <view class="phone-popup-action">
        <button
          class="phone-popup-action__button"
          @click="phoneListPopupShow = false"
          type="default"
        >
          取消
        </button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Promote from "@/pages/components/personal/promote.vue";
import { mapGetters } from "vuex";
import homeTabBar from "./home-tab-bar/index.vue";
import { getMessageCount } from ".././apis/public/index.js";
import { getUserDtlInfo } from ".././apis/recruit/index.js";
import { getPhoneList } from "@/apis/personal/index.js";
export default {
  data() {
    return {
      distributor_id: "",
      factory_id: null,
      phoneList: [],
      phoneListPopupShow: false,
      promoteShow: false,
      quitModelShow: false,
      messageCount: 0,
      showSataus: 0,
      timer: null,
      personal: {},
      states: [],
      personalMenu: [
        {
          path: "/pages/personal/message/index",
          url: "/static/images/p_msg.png",
          name: "我的消息",
        },
        {
          path: `/pages/life-circle/personal-dynamics/index?uid=${uni.getStorageSync(
            "userId"
          )}`,
          url: "/static/images/p_active.png",
          name: "我的动态",
        },
        {
          path: "/pages/personal/group/index",
          url: "/static/images/p_group.png",
          name: "我的组局",
        },
        {
          path: "/pages/personal/coupon/index",
          url: "/static/images/p_volume.png",
          name: "我的卷码",
        },
      ],
      personalOrder: [
        {
          path: "/pages/personal/order/index?state=1",
          url: "/static/images/await_pay.png",
          name: "待付款",
        },
        {
          path: "/pages/personal/order/index?state=2",
          url: "/static/images/await_use.png",
          name: "待使用",
        },
        {
          path: "/pages/personal/order/index?state=3",
          url: "/static/images/await_comment.png",
          name: "待评价",
        },
        {
          path: "/pages/personal/order/index?state=4",
          url: "/static/images/after_sales.png",
          name: "退款/售后",
        },
      ],
      personalService: [
        {
          path: "/pages/recruit/my-resume/index",
          url: "/static/images/online_resume.png",
          name: "在线简历",
          showIdentity: "1",
        },
        {
          path: "/pages/recruit/position-to-top/index",
          url: "/static/images/promotion.png",
          name: "简历置顶",
          showIdentity: "1",
        },
        {
          path: "/pages/personal/join/index",
          url: "/static/images/join.png",
          name: "商户入驻",
          showIdentity: "all",
        },
        {
          path: "/pages/shopmanager/shopmanager",
          url: "/static/images/my_equity.png",
          name: "我的权益",
          showIdentity: "all",
        },
        {
          path: "",
          url: "/static/images/customer_service.png",
          name: "联系客服",
          showIdentity: "all",
        },
        {
          path: "/pages/personal/feedback/index",
          url: "/static/images/feedback.png",
          name: "意见反馈",
          showIdentity: "all",
        },
        {
          path: "/pages/recruit",
          url: "/static/images/excellent_person.png",
          name: "查看牛人",
          showIdentity: "2",
        },
        {
          path: "/pages/recruit/position-promotion/index",
          url: "/static/images/promotion.png",
          name: "职位升级",
          showIdentity: "2",
        },
        {
          path: "/pages/personal/collection/index",
          url: "/static/images/collection.png",
          name: "我的收藏",
          showIdentity: "all",
        },
        {
          path: "/pages/personal/used-car/index",
          url: "/static/images/my_used_car.png",
          name: "我的卖车",
          showIdentity: "all",
        },
      ],
    };
  },
  components: {
    homeTabBar,
    Promote,
  },
  computed: {
    isMan() {
      return this.personal && this.personal.sex == 1;
    },
    // states(){
    // 	return uni.getStorageSync('states')
    // },

    ...mapGetters(["identity"]),
  },
  onLoad(options) {
    this.distributor_id = uni.getStorageSync("distributor_id");
    this.factory_id = uni.getStorageSync("factory_id");
    this.timer = setInterval(this.getMessage, 8000);
    this.getPersonalInfo();
    this.getPhoneList();
  },
  onShow() {
    this.distributor_id = uni.getStorageSync("distributor_id");
    this.factory_id = uni.getStorageSync("factory_id");
    let showSataus = uni.getStorageSync("showSataus");
    this.showSataus = showSataus;
    this.personalMenu.map((item, index) => {
      item.status = index === 1 || index === 2 ? showSataus : 1;
      return item;
    });
    this.personalService.map((item, index) => {
      item.status = index === 0 || index === 1 ? showSataus : 1;
      return item;
    });
    this.states = uni.getStorageSync("states");
    //console.log(this.states);
    // if(!showSataus){
    // 	uni.switchTab({
    // 		url:'/pages/new-car'
    // 	})
    // 	return;
    // }
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    async getPhoneList() {
      try {
        const { code, data, msg } = await getPhoneList();
        if (code === 1) {
          this.phoneList = data;
        } else {
          uni.showModal({ title: "出错啦！", content: msg, showCancel: false });
        }
      } catch (e) {
        uni.showModal({
          title: "出错啦！",
          content: e.message,
          showCancel: false,
        });
      }
    },
    handleQuitConfirm() {
      uni.navigateTo({
        url: "/pages/authorize",
      });
    },
    getPersonalInfo() {
      getUserDtlInfo()
        .then((res) => {
          this.personal = res.data;
        })
        .catch((err) => {
          console.log("个人信息：", err);
        });
    },
    getMessage() {
      let _this = this;
      getMessageCount({
        count: 1,
      }).then((res) => {
        if (+res.code === 200) {
          this.messageCount = res.data;
        }
      });
    },
    handleJudge() {
      uni.getStorage({
        key: "token",
        success(e) {
          uni.navigateTo({
            url: "/pages/shopmanager/shopmanager",
          });
        },
        fail() {
          uni.navigateTo({
            url: "/pages/shopmanager",
          });
        },
      });
    },
    handlePhoneCall(phone) {
      uni.makePhoneCall({ phoneNumber: phone });
    },
  },
};
</script>

<style lang="less">
.u-mode-center-box {
  background-color: transparent !important;
}
page {
  background-color: #f8f8f8;
  padding-bottom: 170rpx;
}
.personal-wrap {
  .iconfontPT {
    &.icon-detail {
      margin-left: 12rpx;
    }
  }

  .header {
    overflow-x: hidden;
    padding-bottom: 35rpx;

    .top-block {
      width: 1000rpx;
      height: 500rpx;
      background: linear-gradient(
        90deg,
        rgba(228, 24, 5, 1) 0%,
        rgba(253, 109, 95, 1) 100%
      );
      border-radius: 0 0 64% 64%;
      margin-left: -126rpx;

      &::after {
        position: absolute;
        top: -76rpx;
        left: 108rpx;
        width: 100%;
        height: 100%;
        content: "";
        display: inline-block;
        background: url("http://cdn1.cheyizhuan.com/common/r.png-t.m90xx");
        background-size: cover;
      }
    }

    .personal-title {
      position: absolute;
      top: 82rpx;
      left: 50%;
      transform: translate(-50%);
    }

    .personal-info {
      position: absolute;
      top: 170rpx;
      padding: 0 35rpx;
      box-sizing: border-box;

      .iconfontPT {
        margin-right: 15rpx;
        color: #fff;
        font-size: 22rpx;
        line-height: 1em;
      }

      .top {
        color: #ffffff;

        .left {
          .avatar {
						display: block;
            width: 108rpx;
            height: 108rpx;
            border-radius: 50%;
            margin-right: 20rpx;
            vertical-align: top;
            border: 5rpx solid #ffffff;
						overflow: hidden;
          }

          .name {
            font-size: 40rpx;
          }

          .location {
            font-size: 24rpx;
          }
        }

        .right {
          height: 50rpx;
          background: rgba(255, 255, 255, 0.37);
          font-size: 24rpx;
          width: 184rpx;
          margin-right: -35rpx;
          border-radius: 25rpx 0rpx 0rpx 25rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 150%;
            height: 150%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      .bottom {
        font-size: 24rpx;
        color: #ffffff;
        margin-top: 15rpx;
      }
    }
  }

  .personal-main {
    position: relative;
    padding: 0 30rpx;
    margin-top: -155rpx;
  }

  .personal-classify {
    height: 208rpx;
    width: 100%;
    border-radius: 20rpx;
    padding: 20rpx 33rpx;
    box-sizing: border-box;
    // position: absolute;
    // left: 50%;
    // transform: translate(-50%);
    font-size: 24rpx;
    margin-bottom: 30rpx;

    .head {
      border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);
      padding-bottom: 20rpx;
      margin-bottom: 30rpx;

      .title {
        font-size: 30rpx;
      }

      .read-all {
        color: #9d9d9d;

        .iconfontPT {
          color: #9d9d9d;
        }
      }
    }

    .item {
      width: 25%;

      .name {
        margin-top: 20rpx;
      }
    }

    &.personal-menu-wrap {
      // top: 350rpx;

      .my-message {
        .message-count {
          position: absolute;
          right: 30rpx;
          top: -15rpx;
          display: inline-block;
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: #e41805;
          color: #ffffff;
          font-size: 20rpx;
          border-radius: 72%;
        }
      }

      .icon {
        width: 53rpx;
        height: 64rpx;
      }
    }

    &.personal-order-wrap {
      // top: 590rpx;
      height: 249rpx;

      .icon {
        width: 48rpx;
        height: 38rpx;
      }
    }

    &.personal-service-wrap {
      // top: 870rpx;
      display: table;

      .icon {
        width: 42rpx;
        height: 42rpx;
      }

      .item {
        margin-bottom: 35rpx;
      }
    }
  }
}

.phone-popup-body {
  border-bottom: 8rpx solid rgba(0, 0, 0, 0.5);
}
.phone-popup-action {
  &__button {
    font-size: 26rpx;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.phone-list {
  // padding: 0 30rpx;
  &__item {
    display: flex;
    justify-content: center;
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 100rpx;
    color: #444444;
    font-size: 26rpx;
    & + & {
      box-shadow: 0 -1rpx 0.5rpx -1rpx #cccccc;
    }
  }
  &__inner {
    display: flex;
  }
  &__phone {
    margin-left: 50rpx;
    text-align: center;
  }
}


</style>
